<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { vi } from 'element-plus/es/locales.mjs'
import MyContextMenu from '~/components/MyContextMenu.vue'
import { toggleDark } from '~/composables'
import useCommonStore from '~/store/common'

const commonStore = useCommonStore()
const route = useRoute()
const router = useRouter()
const tagRefs = useTemplateRefsList<InstanceType<typeof MyContextMenu>>()

function onCloseTag(path: string) {
  commonStore.removeVisitedPage(path)
  if (path === route.fullPath) {
    const visitedPages = commonStore.getVisitedPages()
    let preVisitedPage = visitedPages[0]
    for (let i = 0; i < visitedPages.length; i++) {
      if (visitedPages[i].path === path) {
        break
      }
      else {
        preVisitedPage = visitedPages[i]
      }
    }
    router.push(preVisitedPage.path)
  }
}

function onVisibleChange(visable: boolean, nav: any) {
  if (visable) {
    for (const tagRef of unref(tagRefs)) {
      if (tagRef.extention.path !== nav.path) {
        tagRef.dropdownRef?.handleClose()
      }
    }
  }
}

function getContextMenuItems(nav: MyNav, idx: number): MyContextMenuItem[] {
  return [
    {
      name: '重新加载',
      icon: 'i-ep-refresh',
      command: () => {
        window.location.reload()
      },
    },
    {
      name: '关闭当前标签页',
      icon: 'i-ep-close',
      disabled: idx === 0,
      command: (ext: MyNav) => {
        onCloseTag(ext.path)
      },
    },
    {
      divided: true,
      name: '关闭左侧标签页',
      icon: 'i-ep-d-arrow-left',
      disabled: idx <= 1,
      command: (ext: MyNav) => {
        const visitedPages = commonStore.getVisitedPages()
        let currentClosed = false
        while (visitedPages.length > 1) {
          if (visitedPages[1].path === ext.path) {
            break
          }
          if (visitedPages[1].path === route.fullPath) {
            currentClosed = true
          }
          visitedPages.splice(1, 1)
        }
        if (currentClosed) {
          router.push(ext.path)
        }
      },
    },
    {
      name: '关闭右侧标签页',
      icon: 'i-ep-d-arrow-right',
      disabled: idx === commonStore.getVisitedPages().length - 1,
      command: (ext: MyNav) => {
        const visitedPages = commonStore.getVisitedPages()
        let currentClosed = false
        while (visitedPages.length > 1) {
          if (visitedPages[visitedPages.length - 1].path === ext.path) {
            break
          }
          if (visitedPages[visitedPages.length - 1].path === route.fullPath) {
            currentClosed = true
          }
          visitedPages.splice(visitedPages.length - 1, 1)
        }
        if (currentClosed) {
          router.push(ext.path)
        }
      },
    },
    {
      divided: true,
      name: '关闭其他标签页',
      icon: 'i-ep-discount',
      command: (ext: MyNav) => {
        commonStore.visitedPages = [{ ...ext }]
        router.push(ext.path)
      },
    },
    {
      name: '关闭全部标签页',
      icon: 'i-ep-minus',
      command: () => {
        commonStore.visitedPages = []
        router.push('/')
      },
    },
  ]
}
</script>

<template>
  <el-menu mode="horizontal" :ellipsis="false" class="my-header-menu">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(nav, idx) in commonStore.navList" :key="nav.path">
        <div
          flex items-center hover:cursor-pointer
          :style="idx === commonStore.navList.length - 1 ? {} : { 'color': '#000', 'font-weight': 'bold' }"
        >
          <span :class="nav.icon" style="margin-right: .1rem;" />
          <span>{{ nav.name }}</span>
        </div>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-menu-item h="full" @click="toggleDark()">
      <button class="w-full cursor-pointer border-none bg-transparent" style="height: var(--ep-menu-item-height)">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>

    <div
      flex items-center justify-center p2 hover:cursor-pointer
      style="line-height: var(--ep-menu-item-height);font-size: .6rem;"
    >
      <div i-ep-user-filled mr1 text-3 />
      <div style="color: var(--ep-text-color-secondary);">
        欢迎您，管理员
      </div>
    </div>
  </el-menu>
  <div class="my-header-tags">
    <MyContextMenu
      v-for="(nav, idx) in commonStore.getVisitedPages()" :key="nav.path" :ref="tagRefs.set"
      :extention="nav" :items="getContextMenuItems(nav, idx)" @visible-change="onVisibleChange"
    >
      <router-link :to="nav.path" class="my-tag">
        <el-tag
          :closable="idx > 0" :style="route.fullPath === nav.path ? { '--ep-tag-bg-color': 'var(--ep-color-primary)', '--ep-tag-text-color': 'var(--ep-color-white)', '--ep-tag-border-color': 'var(--ep-color-primary)' } : {}"
          @close.prevent.stop="onCloseTag(nav.path)"
        >
          <div class="my-tag">
            <div :class="nav.icon" mr1 />
            <div>{{ nav.name }}</div>
          </div>
        </el-tag>
      </router-link>
    </MyContextMenu>
  </div>
</template>

<style lang="scss" scoped>
.my-header-menu {
  &.ep-menu--horizontal > .ep-breadcrumb {
    margin-right: auto;
    line-height: var(--ep-menu-item-height);
    padding: 0 1rem;
  }
}

.my-header-tags {
  height: 1.6rem;
  border-bottom: 1px solid var(--ep-border-color);
  text-align: left;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  .ep-tag {
    --ep-tag-text-color: var(--ep-text-color-primary);
    --ep-tag-border-color: var(--ep-border-color);
    --ep-tag-bg-color: transparent;
    overflow: hidden;
    justify-content: space-between;
    margin: 0 0.1rem;
    font-size: 0.6rem;
    padding: 0.6rem 0.5rem;
    &:hover {
      cursor: pointer;
    }
    .my-tag {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
